<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>产品详情页</title>
	<link rel="icon" href="http://static.gmall.com/img/favicon.ico">

	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<link rel="stylesheet" type="text/css" href="http://static.gmall.com/css/all.css" />
	<link rel="stylesheet" type="text/css" href="http://static.gmall.com/css/pages-item.css" />
	<link rel="stylesheet" type="text/css" href="http://static.gmall.com/css/pages-zoom.css" />
    <style type="text/css">
        .goods-intro-list li {
            display: inline-block;
            width: 300px;
        }
        .Ptable {
            margin: 10px 0;
        }
        .Ptable-item {
            padding: 12px 0;
            line-height: 220%;
            color: #999;
            font-size: 12px;
            border-bottom: 1px solid #eee;
        }
        .Ptable-item h3 {
            width: 110px;
            text-align: right;
        }
        .Ptable-item h3, .package-list h3 {
            font-weight: 400;
            font-size: 12px;
            float: left;
        }
        h3 {
            display: block;
            font-size: 1.17em;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
            font-weight: bold;
        }
        .Ptable-item dl {
            margin-left: 110px;
        }
        dl {
            display: block;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
        }
        .Ptable-item dt {
            width: 160px;
            float: left;
            text-align: right;
            padding-right: 5px;
        }
        .Ptable-item dd {
            margin-left: 210px;
        }
        dd {
            display: block;
            -webkit-margin-start: 40px;
        }
        .package-list {
            padding: 12px 0;
            line-height: 220%;
            color: #999;
            font-size: 12px;
            margin-top: -1px;
        }
        .package-list h3 {
            width: 130px;
            text-align: right;
        }
        .package-list p {
            margin-left: 155px;
            padding-right: 50px;
        }
    </style>
	<script type="text/javascript" src="http://static.gmall.com/js/plugins/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="http://static.gmall.com/js/plugins/jquery.cookie.js"></script>
	<script src="http://static.gmall.com/js/plugins/vue.js"></script>
	<script src="http://static.gmall.com/js/plugins/axios.js"></script>
	<script src="http://static.gmall.com/js/request.js"></script>

</head>

<body>
	<!-- 头部栏位 -->
	<!--页面顶部-->
	<div th:include="/common/header :: header"></div>

	<!-- 商品分类导航 -->
	<div th:replace="/common/navigation :: navigation"></div>

	<!-- 商品详情 -->
	<div class="py-container">
		<div id="item" th:object="${itemVo}">
			<!-- 面包屑：分类 品牌 spu -->
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">
					<li th:each="category : *{categories}">
						<a href="#" th:text="${category.name}">手机、数码、通讯</a>
					</li>
					<li>
						<a href="#" th:text="*{brandName}">Apple苹果</a>
					</li>
					<li class="active" th:text="*{spuName}">iphone 6S系类</li>
				</ul>
			</div>
			<!-- 大图片及商品基本信息 -->
			<div class="product-info">
                <!-- 商品大图片列表 -->
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--图片预览-->
						<div id="preview" class="spec-preview">
							<span class="jqzoom">
								<img th:jqimg="*{defaultImage}" th:src="*{defaultImage}" width="400" height="400" />
							</span>
						</div>
						<!--下方的缩略图-->
						<div class="spec-scroll">
							<a class="prev">&lt;</a>
							<!--左右按钮-->
							<div class="items">
								<ul>
									<li th:each="image : *{images}">
										<img th:src="${image.url}" th:bimg="${image.url}" onmousemove="preview(this)" />
									</li>
								</ul>
							</div>
							<a class="next">&gt;</a>
						</div>
					</div>
				</div>
                <!-- sku基本信息：标题 副标题 价格等 -->
				<div class="fr itemInfo-wrap">
					<!-- 标题 -->
					<div class="sku-name">
						<h4 th:text="*{title}">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h4>
					</div>
					<!-- 副标题 -->
					<div class="news">
						<span th:text="*{subTitle}">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</span>
					</div>
					<!-- 价格、评价、促销 -->
					<div class="summary">
						<div class="summary-wrap">
							<div class="fl title">
								<i>价　　格</i>
							</div>
							<div class="fl price">
								<i>¥</i>
                                <!--
                                    ${#numbers.formatDecimal(num,0,'COMMA',2,'POINT')}则显示 .00
                                    ${#numbers.formatDecimal(num,1,'COMMA',2,'POINT')}则显示 0.00
                                -->
								<em th:text="*{#numbers.formatDecimal(price, 1, 'COMMA', 2, 'POINT')}">5999.00</em>
								<span>降价通知</span>
							</div>
							<div class="fr remark">
								<i>累计评价</i>
								<em>62344</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
                                <div th:each="sale : *{sales}">
                                    <i class="red-bg" th:text="${sale.type}">加价购</i>
                                    <em class="t-gray" th:text="${sale.desc}">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
                                </div>
							</div>
						</div>
					</div>
					<!-- 支持 配送 重量 -->
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
							<i>支　　持</i>
						</div>
						<div class="fl fix-width">
							<em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em>
						</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">上海市松江区大江商厦6层</em>
							</div>
						</div>
                        <div class="summary-wrap">
                            <div class="fl title">
                                <i>重 量(g)</i>
                            </div>
                            <div class="fl fix-width">
                                <em class="t-gray" th:text="*{weight}">500</em>
                            </div>
                        </div>
					</div>
					<!-- 销售属性 -->
					<div class="clearfix choose" id="itemVo">
						<div id="specification" class="summary-wrap clearfix">
							<dl v-for="attr in saleAttrs" :key="attr.attrId">
								<dt>
									<div class="fl title">
										<i>选择{{attr.attrName}}</i>
									</div>
								</dt>
								<dd v-for="attrValue,index in attr.attrValues" :key="index" @click="saleAttr[attr.attrId]=attrValue">
									<a href="javascript:;" :class="{'selected':attrValue === saleAttr[attr.attrId]}">{{attrValue}}</a>
								</dd>
							</dl>
						</div>

						<div class="summary-wrap">
							<div class="fl title">
								<div class="control-group">
									<div class="controls">
										<input autocomplete="off" type="text" v-model="count" minnum="1" class="itxt" />
										<a href="javascript:void(0)" class="increment plus" @click="++count">+</a>
										<a href="javascript:void(0)" class="increment mins" @click="--count">-</a>
									</div>
								</div>
							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<a :href="'http://cart.gmall.com?skuId=' + skuId + '&count=' + count" target="_blank" class="sui-btn  btn-danger addshopcar">加入购物车</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 商品详情 -->
			<div class="clearfix product-detail">
				<!-- 左侧栏目：相关分类及品牌 -->
				<div class="fl aside">
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#index" data-toggle="tab">
								<span>相关分类</span>
							</a>
						</li>
						<li>
							<a href="#profile" data-toggle="tab">
								<span>推荐品牌</span>
							</a>
						</li>
					</ul>
					<div class="tab-content tab-wraped">
						<div id="index" class="tab-pane active">
							<ul class="part-list unstyled">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>Iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goods-list unstyled">
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="http://static.gmall.com/img/_/part01.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="http://static.gmall.com/img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="http://static.gmall.com/img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="http://static.gmall.com/img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="http://static.gmall.com/img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div id="profile" class="tab-pane">
							<p>推荐品牌</p>
						</div>
					</div>
				</div>
				<div class="fr detail">
					<!-- 选择搭配 -->
					<div class="clearfix fitting">
						<h4 class="kt">选择搭配</h4>
						<div class="good-suits">
							<div class="fl master">
								<div class="list-wrap">
									<div class="p-img">
										<img src="http://static.gmall.com/img/_/l-m01.png" />
									</div>
									<em>￥5299</em>
									<i>+</i>
								</div>
							</div>
							<div class="fl suits">
								<ul class="suit-list">
									<li class="">
										<div>
											<img src="http://static.gmall.com/img/_/dp01.png" />
										</div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox">
											<span>39</span>
										</label>
									</li>
									<li class="">
										<div id="">
											<img src="http://static.gmall.com/img/_/dp02.png" /> </div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox">
											<span>50</span>
										</label>
									</li>
									<li class="">
										<div id="">
											<img src="http://static.gmall.com/img/_/dp03.png" />
										</div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox">
											<span>59</span>
										</label>
									</li>
									<li class="">
										<div id="">
											<img src="http://static.gmall.com/img/_/dp04.png" />
										</div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox">
											<span>99</span>
										</label>
									</li>
								</ul>
							</div>
							<div class="fr result">
								<div class="num">已选购0件商品</div>
								<div class="price-tit">
									<strong>套餐价</strong>
								</div>
								<div class="price">￥5299</div>
								<button class="sui-btn  btn-danger addshopcar">加入购物车</button>
							</div>
						</div>
					</div>
					<!-- 商品详情主体部分 -->
					<div class="tab-main intro">
						<!-- 商品详情主体部分的菜单：商品介绍 规格与包装 售后保障 商品评价 手机社区 等等 -->
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
							<li>
								<a href="#four" data-toggle="tab">
									<span>商品评价</span>
								</a>
							</li>
							<li>
								<a href="#five" data-toggle="tab">
									<span>手机社区</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<!-- 商品介绍 -->
							<div id="one" class="tab-pane active">
								<ul class="goods-intro unstyled">
									<li>分辨率：1920*1080(FHD)</li>
									<li>后置摄像头：1200万像素</li>
									<li>前置摄像头：500万像素</li>
									<li>核 数：其他</li>
									<li>频 率：以官网信息为准</li>
									<li>品牌： Apple</li>
									<li>商品名称：APPLEiPhone 6s Plus</li>
									<li>商品编号：1861098</li>
									<li>商品毛重：0.51kg</li>
									<li>商品产地：中国大陆</li>
									<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
									<li>系统：苹果（IOS）</li>
									<li>像素：1000-1600万</li>
									<li>机身内存：64GB</li>
								</ul>
								<div class="intro-detail">
									<img th:each="spuImage : *{spuImages}" th:src="${spuImage}"/>
								</div>
							</div>
							<!-- 规格参数 -->
							<div id="two" class="tab-pane">
                                <div class="Ptable">
                                    <div class="Ptable-item" th:each="group : *{groups}">
                                        <h3 th:text="${group.groupName}">主体</h3>
                                        <dl>
                                            <div th:each="attr : ${group.attrValues}">
                                                <dt th:text="${attr.attrName}">品牌</dt><dd th:text="${attr.attrValue}">华为（HUAWEI）</dd>
                                            </div>
                                        </dl>
                                    </div>
                                </div>
							</div>
							<!-- 售后保障 -->
							<div id="three" class="tab-pane">
								<p>售后保障</p>
							</div>
							<!-- 商品评价 -->
							<div id="four" class="tab-pane">
								<div class="comment">
									<div class="com-tit">商品评价</div>
									<div class="com-percent">
										<p>好评度
											<span class="percent">96%</span>
										</p>
									</div>
									<div class="com-tab-type">
										<ul class="type">
											<li class="current">
												<a href="javascript:;">全部评价(123456)</a>
											</li>
											<li>
												<a href="javascript:;">晒图(500)</a>
											</li>
											<li>
												<a href="javascript:;">追评(500)</a>
											</li>
											<li>
												<a href="javascript:;">好评(500)</a>
											</li>
											<li>
												<a href="javascript:;">中评(500)</a>
											</li>
											<li>
												<a href="javascript:;">差评(500)</a>
											</li>
										</ul>
										<div class="content">
											<div class="com-item">
												<div class="user-column">
													<div class="username">
														<img src="http://static.gmall.com/img/_/photo.jpg" />用户****1</div>
													<div class="usernum">品享值258698</div>
												</div>
												<div class="user-info">
													<div class="stars star4"></div>
													<p>手机还不错，可以的可以的</p>
													<div class="guige">
														<ul class="mini">
															<li>玫瑰金</li>
															<li>标配版</li>
															<li>2017-11-02 13:23</li>
														</ul>
														<div class="operate">
															<span id="collect">
																<i class="sui-icon icon-tb-like"></i> 325</span>
															<span id="comment">
																<i class="sui-icon icon-tb-wang"></i> 256</span>
														</div>
														<div class="clearfix"></div>
														<div class="reply">
															<p><span class="name">商家名称官方旗舰店</span>回复：</p>
															<div>亲爱的用户，非常抱歉亲爱的用户，非常抱歉亲爱的用户，非常抱歉亲爱的用户，非常抱歉亲爱的用户，非常抱歉亲爱的用户，非常抱歉亲爱的用户，非常抱歉亲爱的用户，非常抱歉亲爱的用户，非常抱歉亲爱的用户，非常抱歉亲爱的用户，非常抱歉</div>
															<p class="time">2017-11-13</p>
														</div>

													</div>
												</div>
											</div>
											<div class="com-item">
												<div class="user-column">
													<div class="username">
														<img src="http://static.gmall.com/img/_/photo.jpg" />用户****1</div>
													<div class="usernum">品享值258698</div>
												</div>
												<div class="user-info">
													<div class="stars star4"></div>
													<p>手机还不错，可以的可以的</p>
													<div class="guige">
														<ul class="mini">
															<li>玫瑰金</li>
															<li>标配版</li>
															<li>2017-11-02 13:23</li>
														</ul>
														<div class="operate">
															<span id="collect">
																<i class="sui-icon icon-tb-like"></i> 325</span>
															<span id="comment">
																<i class="sui-icon icon-tb-wang"></i> 256</span>
														</div>
														<div class="clearfix"></div>
													</div>
												</div>
											</div>
											<div class="com-item">
												<div class="user-column">
													<div class="username">
														<img src="http://static.gmall.com/img/_/photo.jpg" />用户****1</div>
													<div class="usernum">品享值258698</div>
												</div>
												<div class="user-info">
													<div class="stars star4"></div>
													<p>手机还不错，可以的可以的</p>
													<div class="guige">
														<ul class="mini">
															<li>玫瑰金</li>
															<li>标配版</li>
															<li>2017-11-02 13:23</li>
														</ul>
														<div class="operate">
															<span id="collect">
																<i class="sui-icon icon-tb-like"></i> 325</span>
															<span id="comment">
																<i class="sui-icon icon-tb-wang"></i> 256</span>
														</div>
														<div class="clearfix"></div>
													</div>
												</div>
											</div>
											<div class="com-item">
												<div class="user-column">
													<div class="username">
														<img src="http://static.gmall.com/img/_/photo.jpg" />用户****1</div>
													<div class="usernum">品享值258698</div>
												</div>
												<div class="user-info">
													<div class="stars star4"></div>
													<p>手机还不错，可以的可以的</p>
													<div class="guige">
														<ul class="mini">
															<li>玫瑰金</li>
															<li>标配版</li>
															<li>2017-11-02 13:23</li>
														</ul>
														<div class="operate">
															<span id="collect">
																<i class="sui-icon icon-tb-like"></i> 325</span>
															<span id="comment">
																<i class="sui-icon icon-tb-wang"></i> 256</span>
														</div>
														<div class="clearfix"></div>
													</div>
												</div>
											</div>
											<div class="com-item">
												<div class="user-column">
													<div class="username">
														<img src="http://static.gmall.com/img/_/photo.jpg" />用户****1</div>
													<div class="usernum">品享值258698</div>
												</div>
												<div class="user-info">
													<div class="stars star4"></div>
													<p>手机还不错，可以的可以的</p>
													<div class="guige">
														<ul class="mini">
															<li>玫瑰金</li>
															<li>标配版</li>
															<li>2017-11-02 13:23</li>
														</ul>
														<div class="operate">
															<span id="collect">
																<i class="sui-icon icon-tb-like"></i> 325</span>
															<span id="comment">
																<i class="sui-icon icon-tb-wang"></i> 256</span>
														</div>
														<div class="clearfix"></div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 手机社区 -->
							<div id="five" class="tab-pane">
								<p>手机社区</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--like-->
			<div class="clearfix"></div>
			<div class="like">
				<h4 class="kt">猜你喜欢</h4>
				<div class="like-list">
					<ul class="yui3-g">
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="http://static.gmall.com/img/_/itemlike01.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>3699.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有6人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="http://static.gmall.com/img/_/itemlike02.png" />
								</div>
								<div class="attr">
									<em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4388.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="http://static.gmall.com/img/_/itemlike03.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="http://static.gmall.com/img/_/itemlike04.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="http://static.gmall.com/img/_/itemlike05.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="http://static.gmall.com/img/_/itemlike06.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- 底部栏位 -->
	<!--页面底部-->
	<div th:replace="/common/footer :: footer"></div>
	<!--页面底部END-->
	<!--侧栏面板开始-->
	<div class="J-global-toolbar">
		<div class="toolbar-wrap J-wrap">
			<div class="toolbar">
				<div class="toolbar-panels J-panel">

					<!-- 购物车 -->
					<div style="visibility: hidden;" class="J-content toolbar-panel tbar-panel-cart toolbar-animate-out">
						<h3 class="tbar-panel-header J-panel-header">
							<a href="" class="title">
								<i></i>
								<em class="title">购物车</em>
							</a>
							<span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('cart');"></span>
						</h3>
						<div class="tbar-panel-main">
							<div class="tbar-panel-content J-panel-content">
								<div id="J-cart-tips" class="tbar-tipbox hide">
									<div class="tip-inner">
										<span class="tip-text">还没有登录，登录后商品将被保存</span>
										<a href="#none" class="tip-btn J-login">登录</a>
									</div>
								</div>
								<div id="J-cart-render">
									<!-- 列表 -->
									<div id="cart-list" class="tbar-cart-list">
									</div>
								</div>
							</div>
						</div>
						<!-- 小计 -->
						<div id="cart-footer" class="tbar-panel-footer J-panel-footer">
							<div class="tbar-checkout">
								<div class="jtc-number">
									<strong class="J-count" id="cart-number">0</strong>件商品 </div>
								<div class="jtc-sum"> 共计：
									<strong class="J-total" id="cart-sum">¥0</strong>
								</div>
								<a class="jtc-btn J-btn" href="#none" target="_blank">去购物车结算</a>
							</div>
						</div>
					</div>

					<!-- 我的关注 -->
					<div style="visibility: hidden;" data-name="follow" class="J-content toolbar-panel tbar-panel-follow">
						<h3 class="tbar-panel-header J-panel-header">
							<a href="#" target="_blank" class="title">
								<i></i>
								<em class="title">我的关注</em>
							</a>
							<span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('follow');"></span>
						</h3>
						<div class="tbar-panel-main">
							<div class="tbar-panel-content J-panel-content">
								<div class="tbar-tipbox2">
									<div class="tip-inner">
										<i class="i-loading"></i>
									</div>
								</div>
							</div>
						</div>
						<div class="tbar-panel-footer J-panel-footer"></div>
					</div>

					<!-- 我的足迹 -->
					<div style="visibility: hidden;" class="J-content toolbar-panel tbar-panel-history toolbar-animate-in">
						<h3 class="tbar-panel-header J-panel-header">
							<a href="#" target="_blank" class="title">
								<i></i>
								<em class="title">我的足迹</em>
							</a>
							<span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('history');"></span>
						</h3>
						<div class="tbar-panel-main">
							<div class="tbar-panel-content J-panel-content">
								<div class="jt-history-wrap">
									<ul>
										<!--<li class="jth-item">
										<a href="#" class="img-wrap"> <img src="../../.../portal/img/like_03.png" height="100" width="100" /> </a>
										<a class="add-cart-button" href="#" target="_blank">加入购物车</a>
										<a href="#" target="_blank" class="price">￥498.00</a>
									</li>
									<li class="jth-item">
										<a href="#" class="img-wrap"> <img src="../../../portal/img/like_02.png" height="100" width="100" /></a>
										<a class="add-cart-button" href="#" target="_blank">加入购物车</a>
										<a href="#" target="_blank" class="price">￥498.00</a>
									</li>-->
									</ul>
									<a href="#" class="history-bottom-more" target="_blank">查看更多足迹商品 &gt;&gt;</a>
								</div>
							</div>
						</div>
						<div class="tbar-panel-footer J-panel-footer"></div>
					</div>

				</div>

				<div class="toolbar-header"></div>

				<!-- 侧栏按钮 -->
				<div class="toolbar-tabs J-tab">
					<div onclick="cartPanelView.tabItemClick('cart')" class="toolbar-tab tbar-tab-cart" data="购物车" tag="cart">
						<i class="tab-ico"></i>
						<em class="tab-text"></em>
						<span class="tab-sub J-count " id="tab-sub-cart-count">0</span>
					</div>
					<div onclick="cartPanelView.tabItemClick('follow')" class="toolbar-tab tbar-tab-follow" data="我的关注" tag="follow">
						<i class="tab-ico"></i>
						<em class="tab-text"></em>
						<span class="tab-sub J-count hide">0</span>
					</div>
					<div onclick="cartPanelView.tabItemClick('history')" class="toolbar-tab tbar-tab-history" data="我的足迹" tag="history">
						<i class="tab-ico"></i>
						<em class="tab-text"></em>
						<span class="tab-sub J-count hide">0</span>
					</div>
				</div>

				<div class="toolbar-footer">
					<div class="toolbar-tab tbar-tab-top">
						<a href="#">
							<i class="tab-ico  "></i>
							<em class="footer-tab-text">顶部</em>
						</a>
					</div>
					<div class="toolbar-tab tbar-tab-feedback">
						<a href="#" target="_blank">
							<i class="tab-ico"></i>
							<em class="footer-tab-text ">反馈</em>
						</a>
					</div>
				</div>

				<div class="toolbar-mini"></div>

			</div>

			<div id="J-toolbar-load-hook"></div>

		</div>
	</div>

	<script type="text/javascript" src="http://static.gmall.com/js/plugins/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="http://static.gmall.com/js/plugins/sui/sui.min.js"></script>
	<script type="text/javascript" src="http://static.gmall.com/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
	<script type="text/javascript" src="http://static.gmall.com/js/plugins/jquery.jqzoom/zoom.js"></script>
	<!--<script type="text/javascript" src="http://static.gmall.com/js/plugins/updateimg.js"></script>-->
	<!-- 引入组件库 -->
	<script src="http://static.gmall.com/js/plugins/vue.js"></script>
	<script th:inline="javascript">
		let itemVo = new Vue({
			el: '#itemVo',
			data: {
				saleAttrs: [[${itemVo.saleAttrs}]], // 销售属性可选项
				saleAttr: [[${itemVo.saleAttr}]],
				skuJsons: JSON.parse(decodeURI([[${itemVo.skuJsons}]])), // 销售属性和skuId的关系
				skuId: [[${itemVo.skuId}]],
				count: 1
			},
			watch: {
				saleAttr: {
					deep: true,
					handler(newSaleAttr) {
						console.log(newSaleAttr)
						let key = Object.values(newSaleAttr).join(",")
						this.skuId = this.skuJsons[key]
						window.location = `http://item.gmall.com/${this.skuId}.html`
					}
				}
			}
		})
	</script>
</body>

</html>
